<template>
  <view>
    <view class="content">
      <view class="header">
        <view class="view">
          <view class="text">等待时间</view>
          <view class="img">
            <image src="../../static/prebook/paixu.png" mode=""></image>
          </view>
        </view>
        <view class="view">
          <view class="text">数量</view>
          <view class="img">
            <image src="../../static/prebook/paixu.png" mode=""></image>
          </view>
        </view>
        <view class="view">
          <view class="text">筛选</view>
          <view class="img">
            <image src="../../static/prebook/shaixuan.png" mode=""></image>
          </view>
        </view>
      </view>
      <view class="filter">
        <view class="view">
          <uni-data-select class="select" v-model="value" :clear="false" :localdata="range" @change="change"></uni-data-select>
        </view>
        <view class="view">
          <uni-data-select class="select" v-model="value" :clear="false" :localdata="range" @change="change"></uni-data-select>
        </view>
        <view class="view">
          <uni-data-select class="select" v-model="value" :clear="false" :localdata="range" @change="change"></uni-data-select>
        </view>
      </view>
      <view class="main">
        <view class="search">
          <u-search placeholder="搜索客户姓名/电话" v-model="keyword" bg-color="#fff" shape="square" :clearabled="true" :show-action="false" height="80"></u-search>
        </view>
        <view class="tab">
          <view class="view" @click="changeTab(1)">
            <view :class="tabIndex==1?'texted':'text'">
              全部
            </view>
          </view>
          <view class="view" @click="changeTab(2)">
            <view :class="tabIndex==2?'texted':'text'">
              等待中
            </view>
          </view>
          <view class="view" @click="changeTab(3)">
            <view :class="tabIndex==3?'texted':'text'">
              设计中
            </view>
          </view>
          <view class="view" @click="changeTab(4)">
            <view :class="tabIndex==4?'texted':'text'">
              已预设计
            </view>
          </view>
        </view>
        <view class="list">
          <view class="card">
            <view class="header">
              <view class="left">
                <view class="tag">住宅</view>
                <view class="name">P011</view>
              </view>
              <view class="right">已等待20分钟</view>
            </view>
            <view class="middle">
              <view class="righttop">
                待联系
              </view>
              <view class="left">设计师：</view>
              <view class="right">专业设计陈大师</view>
              <view class="left">姓名：</view>
              <view class="right">陈大师</view>
              <view class="left">手机：</view>
              <view class="right">139***1234</view>
              <view class="left">优惠劵：</view>
              <view class="right">抖音团购券满500减100</view>
              <view class="left">备注：</view>
              <view class="right" style="height: 100%;">备注备注备注备注备注备注备注备注备注备注备注备注备注备注备注备注备注备注备注备注备注备注备注备注备注备注</view>
            </view>
            <view class="bottom">
              <view class="over">
                过号
              </view>
              <view class="pass">
                转交平台设计中心
              </view>
              <view class="info">
                详情
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    
  </view>
  
</template>

<script setup>
import { ref } from 'vue'
const value = ref('')
const keyword = ref('')
const range = ref([{
    value: '今天',
    text: '今天'
  },
  {
    value: '明天',
    text: '明天'
},{
    value: '7天内',
    text: '7天内'
},{
    value: '指定时间',
    text: '指定时间'
}])
const change = (e) => {
  console.log('选择value', e)
  // value.value = e
  console.log('value.value', value.value)
}
const tabIndex = ref(1) 
const changeTab = (e) => {
  console.log('选择tabIndex', e)
  tabIndex.value = e
  console.log('tabIndex.value', tabIndex.value)
}
// 跳转页面
const openPage = (id) => {
  console.log('id=',id)
  uni.navigateTo({
    url: '/pages/index/output/outputinfo'+'?id='+id
  })
}
</script>

<style lang="scss" scoped>
  page {
    background-color: #fff;
  }
  .content {
    padding: 10rpx;
    border-top: 2rpx solid #EEEEEE;
    overflow: hidden;
    .header{
      width: 100%;
      // border: 1px solid red;
      height: 80rpx;
      display: flex;
      justify-content: space-between;
      .view{
        width: 100px;
        height: 80rpx;
        line-height: 80rpx;
        // border: 1px solid rebeccapurple;
        text-align: center;
        display: flex;  
        justify-content: center;
        .img{
          width: 22rpx;
          height: 22rpx;
          image{
            width: 100%;
            height: 100%;
          }
        }
      }
    }
    .filter{
      width: 90%;
      height: 100rpx;
      // border: 1px solid green;
      display: flex;
      justify-content: space-between;
      .view{
        width: 100px;
        height: 100rpx;
        // border: 1px solid brown;
        display: flex;
        align-items: center;
        padding: 2rpx;
        .select{
          border-radius: 32rpx;
          background-color: rgb(221,221,221);
        }
        ::v-deep .uni-select[data-v-ddf9e0a2] {
          border: 0px solid #fff;
        }
        ::v-deep .uni-select__input-placeholder[data-v-ddf9e0a2] {
          color: #000;
          font-size: 20rpx;
        }
        ::v-deep .uni-select__input-text[data-v-ddf9e0a2] {
          font-size: 20rpx;
        }
      }
    }
    .main{
      width: 100%;
      background-color: rgb(246,246,246);
      height: 100%;
      // border: 2rpx solid red;
      .tab{
        width: 100%;
        display: flex;
        justify-content: space-between;
        height: 100rpx;
        align-items: center;
        // border: 1px solid red;
        background-color: #fff;
        .view{
          width: 25%;
          height: 80rpx;
          // border: 1rpx solid green;
          display: flex;
          align-items: center;
          justify-content: center;
          .text{
            color:#000;
            height: 60rpx;
            border-bottom: 5rpx solid #fff;
          }
          .texted{
            color: rgb(109,206,185);
            height: 60rpx;
            border-bottom: 5rpx solid rgb(109,206,185);
          }
        }
      }
      .search{
        height: 60px;
        padding: 10rpx;
        display: flex;
        align-items: center;
      }
      .list{
        width: 100%;
        height: 100%;
        margin-top: 20rpx;
        .card{
          width: 100%;
          min-height: 400rpx;
          background-color: #fff;
          border-radius: 40rpx;
          border: 2rpx solid #EEEEEE;
          padding: 20rpx;
          padding-top: 0;
          .header{
            width: 100%;
            height: 80rpx;
            display: flex;
            justify-content: space-between;
            border-bottom: 2rpx solid #EEEEEE;
            .left{
              display: flex;
              align-items: center;
              .tag{
                background-color: rgb(255,159,91);
                border-radius: 10rpx;
                color: #fff;
                text-align: center;
                font-size: 20rpx;
                font-weight: 600;
                padding: 5rpx 20rpx;
                margin-right: 20rpx;
              }
              .name{
                font-size: 30rpx;
                font-weight: 600;
              }
            }
            .right{
              line-height: 100rpx;
              font-size: 20rpx;
            }
          }
          .middle{
            width: 100%;
            margin-top: 20rpx;
            display: flex;
            flex-wrap: wrap;
            position: relative;
            .righttop{
              position: absolute;
              top:-20rpx;
              right: 0;
              padding: 5rpx 50rpx;
              text-align: center;
              color: #fff;
              font-size: 16rpx;
              border-radius: 10rpx;
              background-color: rgb(204,204,204);
            }
            .left{
              width: 20%;
              text-align: left;
              font-size: 18rpx;
              height: 40rpx;
              line-height: 40rpx;
            }
            .right{
              width: 80%;
              font-size: 18rpx;
              height: 40rpx;
              line-height: 40rpx;
            }
          }
          .bottom{
            width: 100%;
            display: flex;
            justify-content: flex-end;
            margin-top: 20rpx;
            .over{
              padding: 10rpx 30rpx;
              text-align: center;
              color: #000;
              font-size: 16rpx;
              border-radius: 30rpx;
              border: 1rpx solid rgb(221,221,221);
              background-color: #fff;
              margin-right: 200rpx;
            }
            .pass{
              padding: 10rpx 30rpx;
              text-align: center;
              color: goldenrod;
              font-size: 16rpx;
              border-radius: 30rpx;
              background-color: #000;
              margin-right: 10rpx;
            }
            .info{
              padding: 10rpx 30rpx;
              text-align: center;
              color: #000;
              font-size: 16rpx;
              border-radius: 30rpx;
              border: 1rpx solid rgb(221,221,221);
              background-color: #fff;
            }
          }
        }
      }
    }
  }
</style>